<template>
  <div class="count">
    <div class="tab">
      <div class="tab-item on" v-for="(item) in tab" :key="item.id">
        <router-link :to="item.src" replace>{{item.content}}</router-link>
      </div>
    </div>
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'Count',
  data () {
    return {
      tab: [
        { id: 1, src: '/count/income', content: '收入' },
        { id: 2, src: '/count/servicearea', content: '服务区' },
        { id: 3, src: '/count/toll', content: '收费站' }
      ],
      currentIndex: 1
    }
  },
  created () {
  }
}
</script>

<style scoped lang="less">
.count{
  overflow: hidden;
  width: 100%;
  background: linear-gradient(to bottom, #4885f2, #4278ed,#3563e5 );
  background: -webkit-linear-gradient(to bottom, #4885f2, #4278ed,#3563e5 );
  background: -ms-linear-gradient(to bottom, #4885f2, #4278ed,#3563e5 );
  background: -webkit-linear-gradient(to bottom, #4885f2, #4278ed,#3563e5 );
  .tab{
    width: 230px;
    margin: 50px auto 0;
    height: 30px;
    line-height: 30px;
    background-color: #8da9fd;
    border-radius: 18px;
    font-size: 13px;
    padding: 3px 4px;
    text-align: center;
    color: #fff;
    .tab-item{
      float: left;
      width: 33.33%;
      a{
        color: #fff;
        display: block;
        &.router-link-active{
          color: #344ff1;
          background-color: #fff;
          border-radius: 14px;
          width: 73px;
          height: 24px;
        }
      }

    }
  }
}
</style>
